<template>
  <div>
    <div
      style="
        padding: 0.75rem;
        width: 100%;
        background: #eee;
        height: calc(100vh - 2.75rem - 2.75rem);
        overflow: auto;
      "
      v-if="list.length != 0"
    >
      <div class="li" v-for="item in list" :key="item.id">
        <div class="li_item">
          {{ subject }}({{ item.form == "全部题目" ? "循环模式" : "普通模式" }})
        </div>
        <div class="li_content">
          <div style="display: flex">
            <div style="flex: 2">
              <span> 答题数: </span>
              <i style="font-size: 1.25rem; color: #1531b7">
                {{ item.done }}
              </i>
              道
            </div>
            <div style="flex: 3">
              <span> 正确率: </span>
              <i>
                <!-- {{item.use_time>60?parseInt(item.use_time/60)+'分'+parseInt(item.use_time%60)+'秒':item.use_time+'秒' }} -->
                {{ parseInt(item.correct_rate * 100) }}%
              </i>
            </div>
          </div>
          <div>
            <span> 答题时间: </span>
            <i style="color: #666">
              {{ item.create_time }}
            </i>
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无练习记录" v-else />
  </div>
</template>

<script>
import { getapplyid, getsubjectTitle } from "@/utils/auth.js";
import { exermylist } from "@/api/admin.js";
import { mapGetters } from "vuex";
export default {
  props: ["titleName"],
  computed: {
    ...mapGetters(["userinfor", "nickname", "adminUserId"]),
  },
  data() {
    return {
      list: [],
      subject: getsubjectTitle(),
    };
  },
  methods: {
    dataList() {
      exermylist({ applyid: getapplyid() }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.list;
        }
      });
    },
  },
  created() {
    this.dataList();
  },
};
</script>

<style lang="scss" scoped>
.li {
  padding: 0.75rem;
  background: #fff;
  font-size: 1rem;
  border-radius: 0.4rem;
  margin-top: 0.75rem;
  &:first-child {
    margin-top: 0;
  }
  .li_item {
    display: flex;
    justify-content: flex-start;
    p {
      margin: 0;
      flex: 3;
    }
    span {
      flex: 2;
      font-weight: 600;
    }
  }
  .li_content {
    line-height: 2rem;
    margin-top: 0.75rem;
    span {
      font-weight: 600;
    }
    i {
      font-size: 1rem;
    }
  }
}
</style>